Local UIFlowの自由研究
https://scrapbox.io/files/65711f4a836dd100243ac4b8.svg
はじめに
今、M5Stackでは、LAN環境だけで動作するLocal UIFlowが活発に開発されています。 私は、このシステムのアルファテスターとして参加させていただいていました。
Local UIFlow公開版に関しては、2023/12/06に公開されました!!
今回、ここで、現在わかっているLocal UIFlowについてご紹介したいと思います。
現在公開されたLocal UIFlowは、開発中のコードネームをuiflow.exeと言いました。
この文章では、以下、Local UIFlow公開版を単にLocal UIFlowと呼んでいます。
この文章では、アルファテストだけで公開されなかったCM4Stack用Local UIFlowを指す場合は、CM4Stack版と呼びます。
Local UIFlowってなあに?
https://gyazo.com/30243579fa0bed8bd95cf0beaadae63b
UIFlowは、M5Stackのマイコンで使えるビジュアルプログラミング環境です。
一般的な構成では、UIFlowの利用にはインターネット接続が必要です。
インタネット接続して利用するUIFlowのシステム構成は、以下の図のようになっています。
https://gyazo.com/df0d0df7e9d0b1dbe1944b0c2eba3371
Local UIFlowは、LANだけでインターネットが使えない環境でも UIFlowが使えるようにするサーバー環境です。
以下のような種類の環境があります。
Local UIFlow: Windows11/x64, macOS(Intel x64/Apple silicon), Linux/x64 Linux/arm (RaspberryPi OS 32bit版)で利用可能(2023/12/06に公開されました!!)
Local UIFlowは、各OS毎に提供されますが、オープンソースソフトウエア(OSS)というわけではなくソースは提供されません。
Local UIFlow公開版
Local UIFlowは2023/12/06に公開されました!!
https://scrapbox.io/files/65711f4a836dd100243ac4b8.svg
Local UIFlowのシステム構成は、上図のようになります。
同一LANの中に、Local UIFlowサーバー、M5Stack、UIFlowを動かすPCを配置します。
ここでは、無線LANルーターでDHCPを行う構成としていますが、Local UIFlowサーバーでDHCPサーバーを提供することも可能で、この場合無線LANルーターは不要になります。
Local UIFlowサーバーで無線LAN APとDHCPサーバーを構成しない場合は、M5StackとUIFlow PCにDHCPでのIPアドレス配布と無線LANによる接続を実現するために、無線LANルーターが必要になります。
Local UIFlowの入手方法
Local UIFlowは2023/12/06現在の時点で、Windows11/x64, macOS(Intel x64/Apple silicon), Linux/x64, Linux/arm (RaspberryPi OS 32bit版)で動作します。
https://gyazo.com/287718834e5fd30223ff8ca75e597de7
各OSの提供ファイルは、以下のようになります。
Windows11版: UIFlow-Local-Server_Win11_x64.zip
macOS版: UIFlow-Local-Server_MacOS.pkg(Intel x64/Apple silicon): pkgからのインストールが必要
Linux版: UIFlow-Local-Server_Linux_x64.tar.gz(x64), UIFlow-Local-Server_Linux_arm.tar.gz(arm)
Local UIFlowを動かす:Local UIFlowサーバー側
Local UIFlowを起動するためには、以下のようにします。
Windows11版: 展開したディレクトリのbin/UIFlow Server.exeを実行します(下図)。
https://gyazo.com/1dc29c7ce9e966376eebdf33c3319781
macOS版: pkgファイルをインストールした後で、/Applications/にあるUIFlow.Server.Desktopを実行します(下図)。
https://gyazo.com/4e776f8da0c409cf395b6e94f66d4828
Linux版: 展開したディレクトリのUIFlow.Server.Desktopを実行します。
GUIはどのOS版でも同じです。
サーバを起動したマシンのIPアドレスと指定したポート番号(デフォルト8800)にアクセスすることで、UIFlowが利用可能です。
サービスを提供するIPアドレスとポート番号は変更することが可能です。
https://gyazo.com/d7358f92695a0d1bd4bcf490e11990ac
必要であれば起動時に、Local UIFlowのバージョン更新を促すウインドウが表示され、更新が可能になります。
https://gyazo.com/7fa7901cf0c67eaa4b8477306258ebb0
以下、Local UIFlowサーバーが動いているIPアドレスとポート番号を192.168.12.1:8800と仮定します。
Local UIFlowを動かす:M5Stack側
M5Stack側には、もちろんM5BurnerでUIFlowをインストールしなければなりませんが、ここではその詳細は省略します。
インストール後、設定項目(UIFlow Configuration)のServerにUIFlowサーバーのIPアドレスを指定します。
下の図の、Configureボタンから設定画面に入れます。
https://gyazo.com/bee91db69cb98eacb8a3cac69a09b189
ポート番号は指定しなくてもデフォルト(8800)を使うようで、大丈夫です。
https://gyazo.com/76e05150b5054b9e629785565504c2b6
PCでUIFlowを動かす
https://gyazo.com/fcefe3b614a9d085977dae1db16a336b
PCから、Local UIFlowのアドレスとポート番号を指定して、接続します。
むとうのLocal UIFlow環境
https://gyazo.com/e60383ff9ec2b575c7bdbe70119f66d4
むとうは、SeeedのreTerminalにLocal UIFlowをインストールして使っています。 reTerminalにはタッチパネル付きの画面がついているため、簡単に運用が可能な環境を作ることができます。
画面ありでも比較的コンパクトなので、デモ用にもってこいです。
ただ、理想的には、CM4StackでLocal UIFlowが動かせたらなぁと思っています。 イメージとしては、CM4Stackの画面にLocal UIFlowのGUIを表示し、そこをタッチすることでLocal UIFlowの起動や停止ができる感じです。一緒にIPアドレスなどが表示されているとうれしいでしょう。
今、M5Stackチームと少し話をしているので、将来的に利用可能になるかもしれません。
ちなみに、CM4Stack版では、下図のようなCM4Stackの画面のGUIで一部の操作や情報の確認が可能でした。
https://scrapbox.io/files/657102668437a1002cd9fadb.svg
翻訳ファイルの入れかえ
Local UIFlowとCM4Stack版の両方のバージョンで、翻訳ファイルの置き換えが可能です。
BASEDIRはそれぞれ以下を仮定します。
Local UIFlow版
Windows11: ${インストールしたディレクトリー}/bin/webview/assets/blockly/ ? (未検証)
Linux版: ${インストールしたディレクトリー}/webview/assets/blockly/
macOS版: 無理?
CM4Stack版: /home/uiflow-local/docker-volumes/website/assets/blockly/
(日本語)翻訳ファイル(ja.json)のある所
code:shell
${BASEDIR}/language/ja.json
${BASEDIR}/msg/json/ja.json
翻訳ファイルは以下のように置き換えることができます。
language/ja.json: 翻訳ファイルmsg/json/ja.jsonを一行に変換したもの
以下のようなスクリプトで、前者から後者を作成可能です。
code:~/bin/conver_ja.json.py
import sys
import fileinput
for line in fileinput.input():
sys.stdout.write(line.strip())
code:shell
$ pwd
${BASEDIR}
# ${BASEDIR}の場所については上記参照
$ ~/bin/conver_ja.json.py < msg/json/ja.json > language/ja.json
以下の画像では、"イベント"および"UI"をそれぞれ"Takeshi MUTOH"および"@610t"に置き換えました。
https://gyazo.com/3268bf400ed3d93fd4d24b85d1343444
CM4Stack版Local UIFlow
おわりに
この記事では、公開されたばかりのLocal UIFlowに関して、むとうが知っていることをまとめてみました。
インターネット接続が無くてもUIFlowが使える環境は大変便利です。
皆さんも一度使ってみませんか?
作者:I'm 610t!!
https://gyazo.com/29d993247bf7e8192f05cbc215263a1a
むとうたけし(武藤武士)
専業主夫(53歳)＠奈良
所属コミュニティ
アカウント一覧